<template>
  <el-dialog :title='dialogProps.title' v-model='dialogProps.visible' :close-on-click-modal='false' :append-to-body='true' v-loading='loading'>
    <el-form :model='selectModel' :rules='formRules' ref='assigneUserForm' label-width='0px' label-position='right' class='edit-form'>
      <el-form-item prop='selects'>
        <el-select :key='Math.random()' v-model='selectModel.selects' value-key='id' :multiple='multiple' clearable filterable :placeholder='dialogProps.title'>
          <el-option v-for='item in options' :key='item[propsValue]' :label='item[propslabel]' :value='item'></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class='dialog-footer'>
        <el-button type='primary' :plain='true' @click='onOk()'>确 定</el-button>
        <el-button :plain='true' @click='onDialogClose()'>取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { validatenull } from '@/utils/validate'
import BaseUI from '@/views/components/baseUI'
import {findConfig} from '@/views/wf/cfg/candidate.js'
export default {
  extends: BaseUI,
  name: 'assigne-user',
  components: {

  },
  data() {
    return {
      element: null, // 当前配置的元素
      param: null,   // 候选人的参数配置
      multiple: false, // 是否支持多选
      propsValue: 'id', // 下拉框的值字段
      propsLabel: 'name', // 下拉框的显示字段
      options: [],     // 下拉选项
      selectModel: {
        selects: []
      },
      dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
      formRules: {
        // 'selects': [
        //     { required: true, message: '请选择用户', trigger: 'change' }
        // ]
      }
    }
  },
  methods: {
    onOk() {
      this.$refs['assigneUserForm'].validate(valid => {
        if (valid) {
          this.$emit('assinge-finished', this.element, this.selectModel.selects)
          this.dialogProps.visible = false
        }
      })
    },
    onDialogClose() {
      this.dialogProps.visible = false
    },
    initOptions(item) {
      let apis = require('@/api/' + item.param.optionsApi.url)
        let api = apis[item.param.optionsApi.method]
        api(item.param.optionsApi.search).then((responseData) => {
          if (responseData.code == 100) {
            this.options = item.param.optionsApi.parseData(responseData) || []
          } else {
            this.showMessage(responseData)
          }
          this.resetLoad()
        })
        .catch((error) => {
          this.outputError(error)
        })
    },
    openAssigneDialog(element) {
      this.element = element

      // 用户节点
      let item
      if(element["type"] == "bpmn:UserTask") {
        item = findConfig(element.businessObject.candidateUsers)
        this.dialogProps.title = item.param.label
        this.multiple = item.param.multiple

        // 支持多选
        if(this.multiple) {
          if(validatenull(element.businessObject.assignee)) {
            this.selectModel.selects = []
          } else {
            this.selectModel.selects = JSON.parse(element.businessObject.assignee)
          }
        } else {
          if(validatenull(element.businessObject.assignee)) {
            this.selectModel.selects = null
          } else {
            this.selectModel.selects = JSON.parse(element.businessObject.assignee)
          }
        }
      } else { // 启动节点
          item = findConfig('com.geeke.camundaex.candidate.impl.CfgCandidate')
          this.dialogProps.title = '选择创建者'
          this.multiple = false

          if(validatenull(element.businessObject.initiator)) {
            this.selectModel.selects = null
          } else {
            this.selectModel.selects = JSON.parse(element.businessObject.initiator)
          }
      }
      // 获取选项值和显示字段
      if(item.param.props && item.param.props.value) {
        this.propsValue = item.param.props.value
      } else {
        this.propsValue = 'id'
      }
      if(item.param.props && item.param.props.label) {
        this.propslabel = item.param.props.label
      } else {
        this.propslabel = 'name'
      }

      // 获取下拉选项
      if(item.param.options) {
        this.options = item.param.options
      } else {
        this.initOptions(item)
      }

      this.dialogProps.visible = true
    }
  }
}
</script>
